import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Typography from '@material-ui/core/Typography';

const useStyles = makeStyles({
    root: {
        maxWidth: 800,
    },
    media: {
        height: 140,
    },
});

// 视频缩略图
const VideoItem = ({ video, onVideoSelect }) => {
    const classes = useStyles();

    return (
        <Card className={classes.root}>
            <CardActionArea>
                <CardMedia
                    className={classes.media}
                    image={video.snippet.thumbnails.medium.url}
                    title={video.snippet.title}
                    onClick={() => onVideoSelect(video)}
                />
                <CardContent>
                    <Typography variant="subtitle1">
                        <b>{video.snippet.title}</b>
                    </Typography>
                </CardContent>
            </CardActionArea>
        </Card>
    );
    // return (
    //     <Grid item xs={12}>
    //         {/* <Paper style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }} onClick={() => onVideoSelect(video)}>
    //             <img style={{ marginRight: '20px' }} alt="thumbnail" src={video.snippet.thumbnails.medium.url} />
    //             <Typography variant="subtitle1">
    //                 <b>{video.snippet.title}</b>
    //             </Typography>
    //         </Paper> */}

    //     </Grid>
    // )
}
export default VideoItem;